<template>
  <div class="museum2 mid">
    <!-- 面包屑导航 -->
    <div class="musbread">
      <el-breadcrumb separator-class="el-icon-arrow-right">
        <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
        <el-breadcrumb-item>博物馆</el-breadcrumb-item>
      </el-breadcrumb>
    </div>
    <!-- 历史轮播图 -->
    <div class="hiyBox mid">
      <div class="name">
        <h1>探索博物馆的历史与文化</h1>
      </div>
      <historyBox :Con="Con"></historyBox>
    </div>
    <!-- 重点藏品以及新闻引导 -->
    <div class="proBox mid">
      <div class="name">
        <h1>重点藏品以及新闻引导</h1>
      </div>
      <div class="box">
        <div class="pro"></div>
        <div class="pro"></div>
      </div>
      <div class="box" style>
        <div class="pro" style="height:400px;"></div>
        <div style="width:50%">
          <div class="pro" style="width:100%"></div>
          <div style="height:200px; display:flex">
            <div class="pro"></div>
            <div class="pro"></div>
          </div>
        </div>
      </div>
    </div>
    <!-- 分类导航 -->
    <div class="kindOfBox mid">
      <div class="name">
        <h1>文化专题</h1>
      </div>

      <ul class="kindOf">
        <li class="face">
          <div class="con">
            <img :src="require(`@/assets/imgs/d1.jpg`)" alt />
          </div>
        </li>
        <li class="face">
          <div class="con">
            <img :src="require(`@/assets/imgs/d2.jpg`)" alt />
          </div>
        </li>
        <li class="face">
          <div class="con">
            <img :src="require(`@/assets/imgs/d3.jpg`)" alt />
          </div>
        </li>
        <li class="face">
          <div class="con">
            <img :src="require(`@/assets/imgs/d4.jpg`)" alt />
          </div>
        </li>
        <li class="face">
          <div class="con">
            <img :src="require(`@/assets/imgs/m1.jpg`)" alt />
          </div>
        </li>
      </ul>
    </div>
  </div>
</template>

<script>
import historyBox from "../../components/frx/historyBox";
export default {
  components: { historyBox },
  data() {
    return {
      Con: [
        {
          year: "1978年",
          img: "d1.jpg",
          news:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eaque quisquam, nisi optio consequuntur fugit iste nesciunt deleniti iusto quod, eius, deserunt vitae minima ad quae voluptate error animi placeat?"
        },
        {
          year: "1988年",
          img: "d2.jpg",
          news:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eaque quisquam, nisi optio consequuntur fugit iste nesciunt deleniti iusto quod, eius, deserunt vitae minima ad quae voluptate error animi placeat?"
        },
        {
          year: "1998年",
          img: "d3.jpg",
          news:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eaque quisquam, nisi optio consequuntur fugit iste nesciunt deleniti iusto quod, eius, deserunt vitae minima ad quae voluptate error animi placeat?"
        },
        {
          year: "2018年",
          img: "d4.jpg",
          news:
            "Lorem ipsum dolor sit amet consectetur adipisicing elit. Quis eaque quisquam, nisi optio consequuntur fugit iste nesciunt deleniti iusto quod, eius, deserunt vitae minima ad quae voluptate error animi placeat?"
        }
      ]
    };
  },
  computed: {
    bgImage() {}
  },
  methods: {}
};
</script>
<style lang="sass" scoped>
@import "../../assets/css/frx/common.css"

.museum2
    padding-top: 65px
    .musbread
        padding: 10px 0
    .hiyBox 
        padding: 0 0 25px 0
    .proBox
        padding: 25px 0
        .box
            box-sizing: border-box;
            display: flex
        .pro
            box-sizing: border-box;
            height: 200px
            width: 50%
            border: red solid 1px
    .kindOfBox
        padding: 25px 0 50px 0;
        overflow: hidden;
        .kindOf
            display: flex
            justify-content: space-around
            margin: auto 0
            box-sizing: border-box;
            width: 100%
            height: 800px
            border-radius: 5px;
            overflow: hidden;
            // border: red solid 1px
            &:hover
                .face
                    width: 5%
            .face
                overflow: hidden;
                float: left;
                position: relative;
                box-sizing: border-box;
                transition: all .8s;
                width: 20%
                height: 100%
                // border: red solid 1px
                &:hover
                    width: 80%
                .con
                    position: absolute;
                    left: 0px;
                    width: 100%
                    background: rgba(0,0,0,.3)
                    box-sizing: border-box;
                    height: 100%
                    // border:  solid 1px black
                    img
                        height: 100%
                        text-align: center
                    
</style>

<style scoped>
.name {
  margin: auto 0;
}
.name h1 {
  text-align: center;
}
</style>